<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>List</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .list{
      margin: 0 auto;
      margin-top: 50px;
      position: relative;
      width: 400px;
      min-height: 400px;
      border: 1px solid red;
    }
    .list>div{
      width: 100%;
      height: 100px;
      border: 1px solid gray;
      opacity: .5;
      font-size: 12px;
    }
    .list-style>ul>li{
      /* list-style: square; */
      list-style-type: thai;
      list-style-position: inside;
    }
    .table>table{
      table-layout: fixed;
      width: 100%;
      /* border-collapse: inherit; */
      /* border-collapse: collapse; */
      border-collapse: separate;
      border-spacing: 10px 5px;  /* 边框不合并时可使用此属性 */
      caption-side: bottom;
      column-width: 10px;
      column-gap: 10px;
      column-rule: 2px solid red;
    }
  </style>
</head>
<body>
  <div class="list">
    <div class="list-style">
      <ul>
        <li>asdfsdfadsf</li>
        <li>veaewg</li>
        <li>geagxcg</li>
        <li>ryzyxfd</li>
      </ul>
    </div>
    <div class="table">
      <table border="1">
        <caption>表格标题</caption>
        <tr>
          <th>Month</th>
          <th>Savings</th>
          <th>Month</th>
          <th>Savings</th>
        </tr>
        <tr>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
        </tr>
        </tr>
      </table>
    </div>
  </div>
</body>
</html>